<template>
  <div :class="styles['teacher-dashboard']">
    <header :class="styles['dashboard-header']">
      <div :class="styles['header-content']">
        <div :class="styles.logo">
          <img src="/exam-ai-logo.svg" alt="Exam AI" :class="styles['logo-img']">
          <h1 :class="styles['logo-text']">Exam AI</h1>
        </div>
        <div :class="styles['user-info']">
          <span :class="styles.welcome">欢迎，{{ user?.name || user?.username }}</span>
          <button @click="logout" :class="styles['logout-btn']">退出登录</button>
        </div>
      </div>
    </header>

    <main :class="styles['dashboard-main']">
      <div :class="styles['dashboard-container']">
        <aside :class="styles.sidebar">
          <nav :class="styles['nav-menu']">
            <div :class="[styles['nav-item'], styles.active]">
              <i :class="styles['nav-icon']">📊</i>
              <span>仪表板</span>
            </div>
            <div :class="styles['nav-item']">
              <i :class="styles['nav-icon']">📝</i>
              <span>我的考试</span>
            </div>
            <div :class="styles['nav-item']">
              <i :class="styles['nav-icon']">❓</i>
              <span>题目管理</span>
            </div>
            <div :class="styles['nav-item']">
              <i :class="styles['nav-icon']">👥</i>
              <span>学生管理</span>
            </div>
            <div :class="styles['nav-item']">
              <i :class="styles['nav-icon']">📈</i>
              <span>成绩分析</span>
            </div>
            <div :class="styles['nav-item']">
              <i :class="styles['nav-icon']">⚙️</i>
              <span>个人设置</span>
            </div>
          </nav>
        </aside>

        <div :class="styles.content">
          <div :class="styles['content-header']">
            <h2>教师仪表板</h2>
            <p :class="styles.subtitle">教学管理和学生进度跟踪</p>
          </div>

          <div :class="styles['stats-grid']">
            <div :class="styles['stat-card']">
              <div :class="styles['stat-icon']">📝</div>
              <div :class="styles['stat-content']">
                <h3 :class="styles['stat-number']">12</h3>
                <p :class="styles['stat-label']">我的考试</p>
              </div>
            </div>
            <div :class="styles['stat-card']">
              <div :class="styles['stat-icon']">👥</div>
              <div :class="styles['stat-content']">
                <h3 :class="styles['stat-number']">156</h3>
                <p :class="styles['stat-label']">学生总数</p>
              </div>
            </div>
            <div :class="styles['stat-card']">
              <div :class="styles['stat-icon']">❓</div>
              <div :class="styles['stat-content']">
                <h3 :class="styles['stat-number']">89</h3>
                <p :class="styles['stat-label']">题目总数</p>
              </div>
            </div>
            <div :class="styles['stat-card']">
              <div :class="styles['stat-icon']">📊</div>
              <div :class="styles['stat-content']">
                <h3 :class="styles['stat-number']">85%</h3>
                <p :class="styles['stat-label']">平均通过率</p>
              </div>
            </div>
          </div>

          <div :class="styles['quick-actions']">
            <h3>快速操作</h3>
            <div :class="styles['action-buttons']">
              <button :class="styles['action-btn']">
                <i :class="styles['btn-icon']">➕</i>
                <span>创建考试</span>
              </button>
              <button :class="styles['action-btn']">
                <i :class="styles['btn-icon']">❓</i>
                <span>添加题目</span>
              </button>
              <button :class="styles['action-btn']">
                <i :class="styles['btn-icon']">📊</i>
                <span>查看成绩</span>
              </button>
              <button :class="styles['action-btn']">
                <i :class="styles['btn-icon']">👥</i>
                <span>学生管理</span>
              </button>
            </div>
          </div>

          <div :class="styles['recent-exams']">
            <h3>最近考试</h3>
            <div :class="styles['exam-list']">
              <div :class="styles['exam-item']">
                <div :class="styles['exam-icon']">📝</div>
                <div :class="styles['exam-content']">
                  <h4 :class="styles['exam-title']">Java基础测试</h4>
                  <div :class="styles['exam-info']">
                    <span>参与人数: 45</span>
                    <span>平均分: 78.5</span>
                    <span :class="[styles['exam-status'], styles.active]">进行中</span>
                  </div>
                </div>
              </div>
              <div :class="styles['exam-item']">
                <div :class="styles['exam-icon']">📝</div>
                <div :class="styles['exam-content']">
                  <h4 :class="styles['exam-title']">数据库设计</h4>
                  <div :class="styles['exam-info']">
                    <span>参与人数: 38</span>
                    <span>平均分: 82.3</span>
                    <span :class="[styles['exam-status'], styles.completed]">已完成</span>
                  </div>
                </div>
              </div>
              <div :class="styles['exam-item']">
                <div :class="styles['exam-icon']">📝</div>
                <div :class="styles['exam-content']">
                  <h4 :class="styles['exam-title']">Web开发实践</h4>
                  <div :class="styles['exam-info']">
                    <span>参与人数: 0</span>
                    <span>平均分: -</span>
                    <span :class="[styles['exam-status'], styles.draft]">草稿</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div :class="styles['student-progress']">
            <h3>学生进度</h3>
            <div :class="styles['progress-list']">
              <div :class="styles['progress-item']">
                <div :class="styles['progress-avatar']">张</div>
                <div :class="styles['progress-content']">
                  <h4 :class="styles['progress-name']">张三</h4>
                  <div :class="styles['progress-bar']">
                    <div :class="styles['progress-fill']" style="width: 85%"></div>
                  </div>
                  <p :class="styles['progress-text']">已完成 85% 的课程内容</p>
                </div>
              </div>
              <div :class="styles['progress-item']">
                <div :class="styles['progress-avatar']">李</div>
                <div :class="styles['progress-content']">
                  <h4 :class="styles['progress-name']">李四</h4>
                  <div :class="styles['progress-bar']">
                    <div :class="styles['progress-fill']" style="width: 92%"></div>
                  </div>
                  <p :class="styles['progress-text']">已完成 92% 的课程内容</p>
                </div>
              </div>
              <div :class="styles['progress-item']">
                <div :class="styles['progress-avatar']">王</div>
                <div :class="styles['progress-content']">
                  <h4 :class="styles['progress-name']">王五</h4>
                  <div :class="styles['progress-bar']">
                    <div :class="styles['progress-fill']" style="width: 67%"></div>
                  </div>
                  <p :class="styles['progress-text']">已完成 67% 的课程内容</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import styles from '@/styles/teacher/dashboard.module.css'

const authStore = useAuthStore()
const router = useRouter()

const user = computed(() => authStore.user)

const logout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script>